<template>
  <div id="app">
    <div class="container">
      <AddTodo />
      <FilterTodos @filter-change="handleFilterChange"/>
      <Todos :filter-count="filterCount"/>
    </div>
  </div>
</template>


<script setup>
import { ref } from 'vue'
import AddTodo from './components/AddTodo.vue'
import FilterTodos from './components/FilterTodos.vue';
import Todos from './components/Todos.vue';

// 存储过滤数量，默认为200
const filterCount = ref(200)

// 处理过滤数量变化
function handleFilterChange(count) {
  filterCount.value = count
}
</script>

<style scoped>
body {
  font-family: 'Courier New', Courier, monospace;
  line-height: 1.5;
  background-color: #e8e8e8;
}

.container {
  max-width: 1100px;
  margin: auto;
  overflow: auto;
  padding: 0 2rem;
}
</style>
